<template>
  <div id="home">
    <div class="home-main">
      <div class="title">
        <HomeTitle title="主题设置" Eng="Person Information"></HomeTitle>
      </div>
      <div class="name">
        <div class="label">主题名称</div>
        <el-input
          v-model="states.name"
          style="width: 300px; margin: 0 20px"
        ></el-input>
      </div>
      <div class="banner">
        <div class="label">banner图</div>
        <div class="bannerList">
          <div class="item" v-for="(v, k) in states.bannerList" :key="k">
            <el-image
              style="width: 100%; height: 100%"
              :src="baseApi + v"
              preview-teleported
              fit="cover"
              :preview-src-list="[baseApi + v]"
            ></el-image>
            <div class="close" @click="del(k)">
              <ElIcon style="color: red; font-size: 16px">
                <Close></Close>
              </ElIcon>
            </div>
          </div>
          <el-upload
            action=""
            v-model:file-list="states.fileList"
            :show-file-list="false"
            accept=".png,.jpg,.jpeg"
            drag
            style="
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: center;
            "
            :http-request="uploadFiles"
          >
            <div class="item">
              <ElIcon>
                <Plus></Plus>
              </ElIcon>
            </div>
          </el-upload>
        </div>
      </div>
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
    <myLoading v-if="states.loading" />
  </div>
</template>
  
<script setup>
import {
  computed,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  toRefs,
  getCurrentInstance,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { storeUser } from "@/store/user";
import { storeToRefs } from "pinia";
import * as ThemeApi from "@/api/theme";
import * as LoginApi from "@/api/login";
import { ElNotification } from "element-plus";
import HomeTitle from "@/components/title.vue";

const { proxy } = getCurrentInstance();
const user = storeUser();
const loading = ref(false);
const states = reactive({
  name: "",
  fileList: [],
  bannerList: [],
  loading: false,
});
const getTheme = async () => {
  let {data} = await ThemeApi.getTheme();
  states.name = data.UserData.Title
  states.bannerList = data.UserData.ImgUrls
};
onMounted(() => {
  getTheme()
});
const submit = async () => {
  if (states.bannerList.legnth == 0) {
    ElNotification({
      type: "error",
      title: "无轮播图",
      message: "请上传轮播图",
    });
    return;
  }
  if (!states.name) {
    ElNotification({
      type: "error",
      title: "无主题",
      message: "请填写主题名",
    });
    return;
  }
  let { data } = await ThemeApi.save({
    Title: states.name,
    ImagesStr: states.bannerList.join(","),
  });
  if (data.Status != 0) return;
  ElNotification({
    type: "success",
    title: "修改主题",
    message: "修改主题成功！",
  });
};
const uploadFiles = async (e) => {
  let files = [states.fileList[states.fileList.length - 1].raw];
  states.loading = true;
  let { data } = await ThemeApi.upload({}, files);
  states.loading = false;
  if (data.Status != 0) return;
  states.bannerList.push(data.UserData.slice(0, data.UserData.length - 1));
};
const del = async (k)=>{
  states.bannerList.splice(k,1)
}
</script>
  
  <style scoped lang="scss">
::v-deep(.el-form-item__label) {
  color: #fff !important;
}
::v-deep(.el-textarea__inner) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-input__wrapper) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-input__inner) {
  // background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-upload-dragger) {
  padding: 0 !important;
  background: transparent;
}
#home {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: 30px;
  overflow-y: auto;
  background: var(--box-bg-color);

  .home-main {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    .name {
      margin-top: 20px;
      display: flex;
      align-items: center;
      .label {
      }
    }
    .banner {
      margin: 40px 0;
      .bannerList {
        display: flex;
        flex-wrap: wrap;
        .item {
          position: relative;

          .close {
            position: absolute;
            right: -10px;
            top: -10px;
            background: #c6c4c4;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            text-align: center;
            // line-height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            &:hover {
              background: rgba(159, 141, 141, 0.3);
            }
          }
        }
      }
      .item {
        margin: 10px;
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-right: 20px;
        flex-wrap: wrap;
        justify-content: center;
        &:last-child {
          margin: 0;
        }
      }
    }
  }
}
</style>
  